<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .action {
        width: 100px;
        height: 100px;
      }
      .test {
        background-color: skyblue;
      }
      .big {
        font-size: 30px;
      }
      .bold {
        font-weight: bold;
      }
      .italic {
        font-style: italic;
      }
      .color {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="action" :class="classTest?'test':''">box1</div>
      <div class="action" :class="classObj">box2</div>
      <div class="action" :class="classArr">box3</div>
    </div>

    <script>
      Vue.config.productionTip = false;

      // const vm = new Vue({
      //     el : '#app',
      //     data(){
      //         return {
      //             classTest:true,
      //             classObj:{
      //                 big:true,
      //                 bold : true,
      //                 italic : true
      //             },
      //             classArr:['big','bold','italic']
      //         }
      //     }
      // });


    //   new Vue({
    //       el : '#app',
    //       data:{
    //           classTest : true,
    //           classObj :{
    //               bold:true,
    //               italic:true,
    //               big:false,
    //               color:true,
    //           },
    //           classArr:['big','bold','italic','color']
    //       }
    //   });

      new Vue({
          data:{
              classTest:true,
          classObj:{
              big:true,
              bold:true,
              italic:true,
              test:true
          },
          classArr:['big','bold','italic','color']
          }
      }).$mount('#app')
    </script>
  </body>
</html>
